<template>
  <div class="page-container brand-container">
    <el-row v-show="$route.fullPath === $route.matched[1].path" :gutter="30">
      <el-col :span="span">
        <div class="brand-item-wrapper">
          <el-button class="add-brand-btn" icon="el-icon-plus" @click="linkToAdd">新增品牌</el-button>
        </div>
      </el-col>
      <el-col v-for="brand in brandList" :key="brand.id" :span="span" style="margin-bottom: 20px;">
        <div class="brand-item-wrapper">
          <brand-item :brand="brand"/>
        </div>
      </el-col>
    </el-row>
    <router-view v-if="$route.fullPath !== $route.matched[1].path" @refresh="requestData"/>
  </div>
</template>

<script>
import headIcon from '@/assets/tempImages/head-icon.png';
import BrandItem from './components/BrandItem';
import {brandQuery} from '@/api/brand';

export default {
  name: 'BrandMgt',
  components: {
    brandItem: BrandItem
  },
  data() {
    return {
      span: window.screen.width >= 1440 ? 6 : 8,
      brandList: []
    }
  },
  methods: {
    linkToAdd() {
      this.$router.push({name: 'addBrand'});
    },
    async requestData() {
      try{
        const {data} = await brandQuery();
        this.brandList = data;
      } catch(err) {
        console.error(err);
      }
    }
  },
  created() {
    this.requestData();
  }
}
</script>

<style lang="scss" scoped>
  .brand-container{
    background-color: transparent;

    .brand-item-wrapper{
      position: relative;
      padding-top: 50%;
    }

    .add-brand-btn{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      color: rgba(0, 0, 0, 0.427);
      font-size: 14px;
      background: none;
      border: 1px dashed #D9D9D9; 
    }
  }
</style>